<!--生产商编辑-->
<template>
  <div class="editcontainer">
    <el-dialog
      :title="titleMap[edittitle]"
      :visible.sync="vis"
      @close="closeDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号名称" prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="账号密码" prop="username">
          <el-input v-model="ruleForm.password" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="账号类型" prop="type">
          <el-select v-model="ruleForm.type">
            <el-option
              v-for="item in CusServicetype"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="制造商对象编号" prop="object" v-if="ruleForm.type==1">
          <el-select v-model="ruleForm.object">
            <el-option
              v-for="item in manufaturerType"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生产对象编号" prop="object" v-if="ruleForm.type==2">
          <el-select v-model="ruleForm.object">
            <el-option
              v-for="item in accountObject"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <button
          @click="submitForm('ruleForm')"
          class="dialogbutton confim"
          v-if="edittitle=='addData' "
        >确 定</button>
        <button @click="editForm('ruleForm')" class="dialogbutton confim" v-else>提 交</button>
        <button @click="cancle" class="dialogbutton calce">取 消</button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      vis: false,
      ruleForm: {
        username: "",
        password: "",
        type: "",
        object: "0"
      },
      CusServicetype: [
        {
          id: "1",
          name: "口罩机制造商"
        },
        {
          id: "2",
          name: "口罩生产商"
        },
        {
          id: "3",
          name: "平台合作商"
        },
        {
          id: "4",
          name: "总运营商"
        }
      ], //工作模式
      accountObject: [], //对象
      manufaturerType: [], //制造商
      rules: {
        username: [
          { required: true, message: "请输入账号名称", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入账号密码", trigger: "blur" }
        ],
        type: [{ required: true, message: "请选择账号类型", trigger: "blur" }],
        object: [{ required: true, message: "请选择对象编号", trigger: "blur" }]
      },
      titleMap: {
        addData: "添加",
        updateData: "编辑"
      }
    };
  },
  props: {
    dialogFormVisible: Boolean,
    edittitle: String,
    roleform: Object
  },
  watch: {
    dialogFormVisible(newValue, oldValue) {
      this.vis = newValue;
    },
    roleform(newValue, oldValue) {
      this.ruleForm = newValue;
    }
  },
  mounted() {
    this.GetManufaturerList();
    this.GetMaskMachineList();
  },
  methods: {
    //获取制造商编号
    GetManufaturerList() {
      var params = {
        token: this.token
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.MaskMachineModels.GetManufaturerList&api=193`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("制造商商id", res);
            this.manufaturerType = res.data;
          } else {
            console.log(res.msg);
          }
        });
    },
    //获取生产商编号
    GetMaskMachineList() {
      var params = {
        token: this.token
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.MaskMachines.GetMaskMachineList&api=193`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("生产商id", res);
            this.accountObject = res.data;
          } else {
            console.log(res.msg);
          }
        });
    },
    cancle() {
      this.$emit("backtable");
    },
    //关闭弹框
    closeDialog() {
      this.$emit("backtable", true);
    },
    //添加
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("chirldSave", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //编辑
    editForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("chirldEdit", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-dialog,
/deep/ .el-pager li {
  background: url(../../../../static/image/dialog_top.png) no-repeat;
  background-size: 100%100%;
  // box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
  color: #fff;
}
@import "../../../assets/css/dialog";
</style>